﻿@page "/"

<div class="container">
    <div class="row">
        <h1>Experiment with controls</h1>
    </div>
    <div class="row mt-2">
        <div class="col-sm-6">
            Enter text:
        </div>
        <div class="col-sm-6">
            <input type="text" placeholder="Enter text"
                   @onchange="UpdateNumericValue" />
        </div>
    </div>
    <div class="row mt-2">
        <div class="col-sm-6">
            Pick a number:
        </div>
        <div class="col-sm-6">
            <input type="range" @onchange="UpdateValue" />
        </div>
    </div>
    <div class="row mt-2">
        <div class="col-sm-6">Click a button:</div>
        <div class="col-sm-6 btn-group" role="group">
            @for (var buttonNumber = 1; buttonNumber <= 6; buttonNumber++)
            {
                string valueToDisplay = $"Button #{buttonNumber}";
                <button type="button" class="btn btn-secondary"
                        @onclick="() => ButtonClick(valueToDisplay)">
                    @buttonNumber
                </button>
            }
        </div>
    </div>
    <div class="row mt-2">
        <div class="col-sm-6">Pick a date:</div>
        <div class="col-sm-6">
            <input type="date" @onchange="UpdateValue" />
        </div>
    </div>
    <div class="row mt-2">
        <div class="col-sm-6">Pick a color:</div>
        <div class="col-sm-6">
            <input type="color" @onchange="UpdateValue" />
        </div>
    </div>
    <div class="row mt-5">
        <h2>
            Here's the value: <strong>@DisplayValue</strong>
        </h2>
    </div>
</div>

@code
{
    private string DisplayValue = "";

    private void UpdateValue(ChangeEventArgs e)
    {
        DisplayValue = e.Value.ToString();
    }

    private void UpdateNumericValue(ChangeEventArgs e)
    {
        if (int.TryParse(e.Value.ToString(), out int result))
        {
            DisplayValue = e.Value.ToString();
        }
    }

    private void ButtonClick(string displayValue)
    {
        DisplayValue = displayValue;
    }

}